import { h } from "vue"
import { ElText } from "element-plus"
import type { ColumnsType } from "@/components";

/**
 * Table 字段对应 Label
 */
export enum TableLabel {
    Name = "接口名称",
    Path = "接口路径",
    Type = "接口类型",
    Enable = "是否启用",
    Desc = "接口描述",
    CreatedAt = "创建时间",
    UpdatedAt = "更新时间",
}

/** 请求类型 */
export const REQUEST_TYPE = {
    1: "GET",
    2: "POST"
}

/** 启用状态 */
export const ENABLE_STATE = new Map([
    [true, "启用"],
    [false, "禁用"]
])

/** 表格列 配置 */
export const columns: ColumnsType[] = [
    {
        minWidth: 100,
        label: TableLabel.Name,
        prop: "Name"
    },
    {
        minWidth: 160,
        label: TableLabel.Path,
        prop: "Path"
    },
    {
        width: 100,
        label: TableLabel.Type,
        prop: "Type",
        formatter(row, column, cellValue) {
            return REQUEST_TYPE[cellValue as keyof typeof REQUEST_TYPE]
        },
    },
    {
        width: 120,
        label: TableLabel.Enable,
        prop: "Enable",
        formatter(row, column, cellValue) {
            return h(ElText, {
                type: cellValue ? 'primary' : 'danger'
            }, () => ENABLE_STATE.get(cellValue) ?? "未知")
        },
    },
    {
        minWidth: 160,
        label: TableLabel.Desc,
        prop: "Desc"
    },
    {
        width: 180,
        label: TableLabel.CreatedAt,
        prop: "CreatedAt",
        DateFormat: true,
        sortable: true
    },
    {
        width: 180,
        label: TableLabel.UpdatedAt,
        prop: "UpdatedAt",
        DateFormat: true,
        sortable: true
    },
    {
        width: 180,
        fixed: "right",
        label: "操作",
        prop: "operation",
        Slots: {
            default: "operation"
        }
    }
]